<template>
  <div class="userForm">
    <div class="contentMid"></div>
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="24">
          <div class="title">
            <dl class="dls">
              <dd>总存储余量</dd>
              <dt>254/520</dt>
            </dl>
            <dl class="dls">
              <dd>普通存证</dd>
              <dt>120/520</dt>
            </dl>
            <dl class="dls">
              <dd>司法存证</dd>
              <dt>254/520</dt>
            </dl>
            <span>余量不足？<a @click="goShop">立即购买</a></span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 5%">
        <el-col :span="5">
          <el-config-provider :locale="locale">
            <el-date-picker
              style="width: 226px; height: 38px"
              v-model="orderTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-config-provider>
        </el-col>
        <el-col :span="3" style="text-align: center">
          <el-select
            v-model="packType"
            style="width: 120px; height: 38px"
            class="m-2"
            placeholder="全部"
            size="large"
            @change="selectType"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input
            v-model="input"
            class="w-50 m-2"
            placeholder="请输入订单编号"
            size="large"
          >
            <template #suffix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <div class="userTable">
        <el-table :data="arr" border style="width: 100%">
          <el-table-column prop="orderID" label="订单编号" width="180" />
          <el-table-column prop="mobile" label="手机号" width="180" />
          <el-table-column prop="orderTime" label="订单时间" width="180" />
          <el-table-column prop="payment" label="产品名称" />
          <el-table-column prop="orderPrice" label="订单金额(元)" />
          <el-table-column prop="orderNum" label="订单数量" />
          <el-table-column prop="parStatus" label="订单状态">
            <template v-slot="scope">
              <span>
                {{ scope.row.parStatus == true ? "支付成功" : "支付失败" }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="userPage">
        <el-config-provider :locale="locale">
          <el-pagination
            background
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[1, 3, 5, 7]"
            :small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import JsEncrypt from "jsencrypt";
import axios from "axios";
import locale from "element-plus/lib/locale/lang/zh-cn";
const router = useRouter()
// 搜索
const input = ref("");
const OrderNo = ref(""); // 订单编号
const productsName = ref(""); // 产品名称
const orderTime = ref(""); // 订单时间
const packType = ref(""); // 套餐类型
// const search = reactive({
//     input:"",
//     OrderNo:"",
//     productsName:"",
//     regTime:"",
//     packType:""
// })
// 分页
const currentPage = ref(1);
const pageSize = ref(3);
let total = ref(0);
const small = ref(false);
const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "普通存证",
    label: "普通存证",
  },
  {
    value: "司法存证",
    label: "司法存证",
  },
];
const arr = ref([]);
const orderdata = ref([]);
const handleSizeChange = (va) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  getOrder();
};
onMounted(() => {
  getOrder();
});
const getOrder = async () => {
  let item = JSON.parse(window.localStorage.getItem("pcdata")) || {};
  // 新建一个JSEncrypt对象
  let JsE = new JsEncrypt();
  let publicKey = `-----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANrd80S3ZHeD7Ct3PchesL1bppPGU1RL
Xc6x8tTVyCBa3f6Dkx598H6T1m5PXNbCBkIV6c5FaK2YheUEnbI/vqkCAwEAAQ==
-----END PUBLIC KEY-----
`; //公钥加密
  let _id = item.userInfo.id;
  JsE.setPublicKey(publicKey); //pkcs1加密方案
  let { data } = await axios.get("/api/order/orders", {
    params: {
      _id: JsE.encrypt(_id),
      page: currentPage.value,
      size: pageSize.value,
    }, //加密
  });
  orderdata.value = data.orderdata;
  arr.value = data.orderdata;
  total.value = data.total;
};

const selectType = () => {
  arr.value = orderdata.value.filter((item) => {
    if (packType.value == "全部") {
      return item;
    }
    if (packType.value == item.payment) {
      return item;
    }
  });
};
const goShop = () => {
  router.push('/console/topup/shopp')
};
</script>

<style scoped>
.userForm {
  background-color: #fbfbfb;
  height: 90%;
}

.contentMid {
  height: 10px;
}

.phoneIput {
  width: 240px;
  height: 38px;
}

.m-2 {
  width: 240px;
}

.floatBut {
  text-align: center;
}

.userTable {
  margin-top: 5px;
}

.userPage {
  margin-top: 30px;
  float: right;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 38px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.title {
  width: 100%;
  padding: 20px 0;
  border: 1px solid #b3adad;
}

.dls {
  width: 20%;
  height: 100%;
}

.dls,
.title span {
  display: inline-block;
  vertical-align: middle;
}

.dls dd,
.dls dt {
  text-align: center;
  font-size: 15px;
}

.dls dt {
  font-weight: 900;
}

.title span {
  margin-left: 20%;
}

/* 卡片 */

.box-card {
  padding: 20px 40px;
  width: 90%;
  margin: 0.5% auto;
  min-height: 530px;
}
</style>